<!doctype html>
<meta charset=utf-8>
<html>
<head>
  <title>sketcher.js</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext">
  <link rel="shortcut icon" href="img/tgn.png" />
  <link rel="stylesheet" href="css/toolkit.css">
  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
  <script src="lib/verb.js"></script>
  <script src="static/sketcher.bundle.js"></script>
</head>
<body class="small-typography">
  <a id="downloader" style="display: none;" ></a>
  <div class="panel b-bot" style="width: 100%; display: flex; justify-content: space-between">
    <span class="logo" style="float:left">sketcher <sup> 2D</sup></span>
    <div style="display: flex" id="top-toolbar"></div>
  </div>
  <div style="width: 100%; height: calc(100% - 65px); display: flex;">

    <div id="dock" class="panel b-right scroll" style="width: 245px; height: 100%; flex-shrink: 0;"></div>

    <div id="viewer-container" style="background: #808080; overflow: hidden; height: 100%; position: relative; flex-grow: 1;">
      <div class="tool-hint" style="position: absolute; bottom: 5px; right: 5px;"></div>
      <canvas width="300" height="300" id="viewer"></canvas>
      <div id="react-controls" style="position: absolute; top: 0; right: 0; left: 0; height: 0;"></div>
    </div>
    <div id="right-toolbar" class="panel b-left scroll" style="height: 100%; flex-shrink: 0"></div>

  </div>
  
  <div id="status" class="panel b-top" style="width: 100%; height:22px;">
    <div class="button-group" style="float: left">
    </div>
    <div class="status-item coordinates-info">0.000:0.000</div>
    <div class="status-item tool-info"></div>
  </div>

  <div style="width: 0; height: 0" id="global-windows">
  </div>


  <div id="commands" class="win" style="display: none; height: 200px; width: 700px;">
    <div class="tool-caption" >COMMANDS</div>
    <div class="content panel" style="padding: 0;">
      <div class='terminal-output-area scroll'>
        <div class='terminal-pusher'></div>
        <div class='terminal-output'></div>
      </div>
      <div class='terminal-input'>
        <input type="text" placeholder="(type a command)"/>
      </div>
    </div>
  </div>

  <div id="constrFilter" class="win" style="display: none; height: 300px;width:170px;">
    <div class="tool-caption" >CONSTRAINT&nbsp;FILTER</div>
    <div class="content panel scroll" style="padding: 0;">
    </div>
  </div>

  <!--<div id="log" style="position:absolute; width: 500px; height: 300px; top:500px; pxleft:0; overflow: scroll;background-color: salmon;">-->
</body>
</html>